import { h } from 'preact';
import { useState, useEffect } from 'preact/hooks';

import "@static:css/base/input.less";

export function DropDown(props){
    
    const { lists = [] } = props;
    return <div class="select">
        <select>
            {lists.map((e, index) => {
                return <option value={e.value} key={index}>
                    {e.label}
                </option>
            })}
        </select>
    </div>
}

export function TextInput(props){
    const { value = '', onFinished } = props;
    let [val, setValue] = useState(value);
    useEffect(() => {
        setValue(value);
    }, [value])
    return <div class="c-text-input">
                <input type="text" value={val} onInput={e => {
                    const val = e.target.value;
                    setValue(val);
                }} onBlur={e => {
                    onFinished && onFinished(val);
                }}></input>
            </div>
}

export function NumberInput(props){
    const { value = '', onFinished, min = 0, max = 100 } = props;
    let [val, setValue] = useState(value);
    useEffect(() => {
        setValue(value);
    }, [value])
    return <div class="c-number-input">
                <input type="number" value={val} min={min} max={max} onInput={e => {
                    const val = e.target.value;
                    setValue(val);
                }} onBlur={e => {
                    onFinished && onFinished(val);
                }}></input>
            </div>
}

export function CheckInput(props){
    const { checked = false, onChange } = props;
    return <div class="c-checkbox-input">
        <input type="checkbox" value="" onChange={e => {
            console.log('checkbox => ', e.target.checked);
            onChange && onChange(e.target.checked);
        }} defaultChecked={checked} />
    </div>
}

export function ColorInput(props){
    const { color = "#ffffff", onChange } = props;
    let [value, setValue] = useState(color);
    useEffect(() => {
        setValue(value);
    }, [value])
    return <div class="c-color-input">
        <input type="color" value={value} onInput={e => {
            setValue(e.target.value);
        }} onChange={e => {
            console.log('color => ', e.target.value);
            onChange && onChange(e.target.value);
        }} />
    </div>
    
}